<template>
  <div class="edit-area">
    <div class="font-edit">
      <el-select class="mgb5" style="width: 90px" placeholder="请选择" size="mini">
        <el-option
          v-for="item in textOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="color-picker mr15 mgb5">
        <input type="text" />
        <el-color-picker size="mini"></el-color-picker>
      </div>
      <el-input-number
        class="spacing mgb5"
        controls-position="right"
        @change="handleChange1"
        size="mini"
        :min="1"
        :step="1"
      ></el-input-number>
      <el-select
        class="mr15 marginB15 mgb5"
        style="width: 90px"
        placeholder="请选择"
        size="mini"
      >
        <el-option
          v-for="item in textStyleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { throttle } from "lodash";
export default {
  data() {
    return {
      textOptions: [
        {
          value: "serif",
          label: "微软雅黑",
        },
        {
          value: "monospace",
          label: "方正",
        },
      ],
      textStyle: "正常",
      textStyleOptions: [
        {
          value: "normal",
          label: "正常",
        },
        {
          value: "bold",
          label: "加粗",
        },
        {
          value: "lighter",
          label: "细体",
        },
      ],
    };
  },
  methods: {
    handleChange() {},
    handleChange1() {},
    addHistory() {
      // console.log('common style change addHistoryCache')
      this.$store.dispatch("addHistoryCache");
    },
  },
  created() {
    this.throttleAddHistory = throttle(this.addHistory, 3000);
  },
  computed: {
    ...mapState({
      // 	projectData: state => state.editor.projectData,
      // 	activePageUUID: state => state.editor.activePageUUID,
      // 	activeElementUUID: state => state.editor.activeElementUUID,
      //activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      // 'activeElement',
      // 'activePage'
      "activeElement",
    ]),
  },
};
</script>

<style lang='scss' scoped>
.edit-area {
  display: flex;
  width: 300px;
  .right {
    margin-right: auto;
  }
  .color-picker-long {
    display: inline-block;
    width: 195px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    input {
      outline: transparent;
      border: transparent;
      // width: 60px;
      padding-left: 10px;
    }
  }
  .font-edit {
    width: 230px;
    display: flex;
    flex-flow: wrap;
    .color-picker {
      display: inline-block;
      width: 90px;
      display: flex;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      input {
        outline: transparent;
        border: transparent;
        width: 60px;
        padding-left: 10px;
      }
    }
  }
}
.mr15 {
  margin-left: 15px;
}
.spacing {
  width: 90px;
}
.mgb5 {
  margin-bottom: 5px;
}
</style>